<template>
  <div id="applyVSReport">
    <div class="bodyContent">
      <Splitpanes class="area">
        <Pane :size="20">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input v-model="searchForm.instrSearchValue" type="search" clearable class="vxeInputSearch" placeholder="请输入仪器名称" @clear="getInstrList" @search-click="getInstrList()"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新"  @click="getInstrList"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="leftTable">
            <vxe-table ref="feeitemVsItemdictTable" border class="mytable-scrollbar" height="800" show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" @current-change="instrRowClick" :data="feeitemVsItemdictList" :edit-config="{ trigger: 'click', mode: 'cell' }" :column-config="{ resizable: true }">
              <!-- <vxe-column type="checkbox" width="30px" align="center"></vxe-column> -->
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="instrCode" title="仪器编码" align="center"></vxe-column>
              <vxe-column field="instrName" title="仪器名称" align="center"></vxe-column>

            </vxe-table>
          </div>
        </Pane>
        <!-- 右侧信息 -->
        <Pane :size="80">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-radio-group v-model="culCombinaType" @change="radioChange">
                <vxe-radio-button label="1" content="开盒登记"></vxe-radio-button>
                <vxe-radio-button label="2" content="空盒登记"></vxe-radio-button>
              </vxe-radio-group>
              &nbsp;&nbsp;&nbsp;
              条码号：<vxe-input type='search' v-model='barcode' clearable class='vxeInputSearch' @keydown='keyupItemDictEnter'></vxe-input>

            </template>
          </vxe-toolbar>
          <div class="rightTable">
            <vxe-table ref="itemDictTable" border show-header-overflow height="800" show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" :data="itemDictList" :loading="showLoading" class="mytable-scrollbar">
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="status" title="状态">
                <template #default="{ row }">
                  <span v-if="row.status==1" style="color:red;">开盒</span>
                  <span v-else style="color:blue;">空盒</span>
                </template>
              </vxe-column>
              <vxe-column field="barcode" title="条码">
              </vxe-column>
              <vxe-column field="openCloseTime" title="开/关时间">
              </vxe-column>
              <vxe-column field="operateTime" title="时间记录">
              </vxe-column>
              <vxe-column field="operatorName" title="操作人">
              </vxe-column>
            </vxe-table>
          </div>
        </Pane>
      </Splitpanes>
    </div>
    <vxe-modal class-name="addEditHrItemDialog" v-model="openHrItem" title="关闭时间" width="20vw" height="20vh" show-zoom resize>
      <el-form ref="formRef" :model="hrForm" label-width="100px">
        <el-form-item label="关闭时间">
          <el-date-picker style="width:80%;" :popper-style="{ zIndex: 9999999 }" :tabindex="999000" v-model="hrForm.openCloseTime" type="datetime" placeholder="期望完成时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button type="primary" @click="submitHrForm">确 定</el-button>
        <el-button @click="cancelHrForm">取 消</el-button>
      </div>
    </vxe-modal>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted, watch } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { AppStore } from '@/stores/store';
import { isEmpty } from 'lodash';
import SelectWorkGroup from '@/views/lab_sys/lab_bus/components/SelectWorkGroup.vue'; //报告单元引入下拉组件
import { GetRptGroupOptions } from '@/utils/SysOptionsHelper';
import { IsEmpty } from '@/utils/common';
import VXETable from 'vxe-table';
import moment from 'moment';

let store = AppStore();
// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let conWidth = ref(document.documentElement.clientWidth);
const itemDictList = reactive([]);
let selevctFeeItemRow: any = reactive({
  id: ''
});

let searchGroupForm = reactive({
  rptGroup: ''
});

let showLoading = ref(false); //刷新+表格加载
let feeItemShowLoading = ref(false);
let searchValue = ref('');
const searchForm = reactive({
  orgId: store.userInfo.orgId,
  groupSearchValue: '',
  name: store.userInfo.orgName,
  instrSearchValue: ''
});
let instrSetupList = reactive([]); //仪器列表
let addDialog = ref(false); //添加弹框展示状态
let loading = ref(false); //添加弹框展示状态
let rowData = ref({}); //当前行数据
let instrCode = ref('');
let hrForm = reactive({
  id: '',
  openCloseTime: ''
});
let openHrItem = ref(false);
let culCombinaType = '1';
let barcode = ref(null);
const feeitemVsItemdictList = reactive([]);
// 方法定义区 =============
onMounted(() => {
  getInstrList();
});

function instrRowClick({ row }: any) {
  instrCode.value = row.instrCode;
  getOpenEmptyBoxList();
}

function getOpenEmptyBoxList() {
  findOpenEmptyBoxList(selevctFeeItemRow);
}

function keyupItemDictEnter({ value, $event }: any) {
  if ($event.keyCode === 13) {
    openAndEmptyBox(culCombinaType);
  }
}

function radioChange(e) {
  culCombinaType = e.label;
  findOpenEmptyBoxList(selevctFeeItemRow);
}

// 获取报告项目列表
function findOpenEmptyBoxList(row: any) {
  itemDictList.length = 0;
  showLoading.value = true;
  const url = '/inv/openemptybox/findOpenEmptyBoxList';
  let obj = {
    params: {
      reagentCode: selevctFeeItemRow.reaNo,
      instrCode: instrCode.value,
      type: culCombinaType
    }
  };
  proxy.$http
    .get(url, obj)
    .then((res: any) => {
      if (res.data && res.data.length > 0) {
        itemDictList.push(...res.data);
      }
      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}

// 获取中间的报告单元信息
function getInstrList() {
  feeitemVsItemdictList.length = 0;
  const url = '/lis/instrSetup/findInstrSetupList';
  const data = {
    params: {
      instrName: searchForm.instrSearchValue
    }
  };
  proxy.$http
    .get(url, data)
    .then((res: any) => {
      feeitemVsItemdictList.push(...res.data);
      (proxy.$refs.feeitemVsItemdictTable as any).setCurrentRow(feeitemVsItemdictList[0]);
      instrRowClick({ row: feeitemVsItemdictList[0] });
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function openAndEmptyBox(type) {
  const data = {
    instrCode: instrCode.value,
    status: type,
    barcode: barcode.value,
    openCloseTime: moment().format('YYYY-MM-DD HH:mm:ss'),
    operateTime: moment().format('YYYY-MM-DD HH:mm:ss'),
    operator: store.userInfo.username,
    operatorName: store.userInfo.realname
  };
  const url = '/inv/openemptybox/addOpenEmptyBox';
  proxy.$http
    .post(url, data)
    .then((res: any) => {
      if (res.status.code === 1) {
        VxeMessage('保存成功', VxeNotifyType.success);
        getOpenEmptyBoxList();
      } else {
        VxeMessage(res.status.msg, VxeNotifyType.error);
      }
    })
    .catch((err: string) => {
      VxeMessage('系统异常', VxeNotifyType.error);
    });
}

function editCloseTime() {
  const data = itemDictList.filter((p) => p.status == 2);
  hrForm.openCloseTime = data[0].openCloseTime;
  hrForm.id = data[0].id;
  openHrItem.value = true;
}

function submitHrForm() {
  const data = {
    id: hrForm.id,
    openCloseTime: hrForm.openCloseTime
  };
  const url = '/inv/openemptybox/editOpenEmptyBox';
  proxy.$http
    .post(url, data)
    .then((res: any) => {
      if (res.status.code === 1) {
        VxeMessage('修改成功', VxeNotifyType.success);
        openHrItem.value = false;
        getOpenEmptyBoxList();
      } else {
        VxeMessage('修改失败', VxeNotifyType.error);
      }
    })
    .catch((err: string) => {
      VxeMessage('修改失败', VxeNotifyType.error);
    });
}

function cancelHrForm() {
  openHrItem.value = false;
}
</script>
<style lang="scss" scoped>
#applyVSReport {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .el-tabs {
      height: 100%;

      :deep(.el-tabs__content) {
        height: calc(100% - 39px);
        padding: 0px;

        .el-tab-pane {
          height: 100%;
        }
      }
    }

    .area {
      background-color: $base-white;
    }

    // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }

    // 查询按钮
    .SearchBtn {
      margin-right: 5px;
    }

    .tableBox {
      height: calc(100% - 40px);

      .vxe-table {
        height: 100%;

        :deep(.vxe-table--render-wrapper) {
          height: 100%;

          .vxe-table--main-wrapper {
            height: 100%;

            .vxe-table--body-wrapper {
              height: calc(100% - 26px) !important;
            }
          }
        }
      }
    }
  }
  .dialogFooter {
    text-align: right;
  }
}
</style>
